import React, { useEffect, useState } from 'react';
import { Table, Button, Space, Input, Modal, Form, Select, notification, Switch } from 'antd'
import { vipuser_list, vipuser_search, vipuser_del, vipuser_add, vipuser_manydel, vipuser_edit, vipuser_pagination, vipuser_select } from "../../../utils/vip/api"
import "../../../styles/VipEquities.scss"
const { Search } = Input;
function VipEquities(props) {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    var [loading, setLoading] = useState(false);
    var [data, setData] = useState([])
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 50 })
    var [isModalOpen1, setIsModalOpen1] = useState(false)
    var [isModalOpen2, setIsModalOpen2] = useState(false)
    var [options, setOptions] = useState([])
    //存id
    var [id, setId] = useState()

    //使用from中的userfrom()方法，通过from来绑定要操作的from表单
    const [form] = Form.useForm()

    //显示 弹框 新增 编辑
    const showModel1 = () => {
        setIsModalOpen1(true);
    };
    const showModel2 = () => {
        setIsModalOpen2(true);
    };
    //隐藏 弹框 新增 编辑
    const handleCancel1 = () => {
        setIsModalOpen1(false);
    };
    const handleCancel2 = () => {
        setIsModalOpen2(false);
    };

    //引入生命周期
    useEffect(() => {
        vipuser_list().then((res) => {
            setData(res.data)
            console.log(res.data);
        })
    }, [])

    //选择发生改变的回调(多选框)
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    // 单选按钮触发时的回调
    const onChange = (checked) => {
        console.log(`switch to ${checked}`);
    };

    //搜索
    var onSearch = (value) => {
        console.log(value);
        vipuser_search({ name_like: value }).then((res) => {
            console.log(res.data);
            setData(res.data)
        })
    }
    //新增
    var add = () => {
        showModel1()
    }
    //删除
    var del = (record) => {
        console.log(record);
        vipuser_del(record.id).then((res) => {
            console.log(res.data);
            vipuser_list().then((res) => {
                setData(res.data)
                console.log(res.data);
                notification.success({
                    placement: "top",
                    message: "删除成功！"
                })
            })
        })
    }
    //编辑
    var edit = (record) => {
        showModel2()
        form.setFieldsValue(record)
        // form.setFieldsValue({
        //     type: record.type
        // })
        setId(record.id)
    }
    //批量删除
    var manydel = () => {
        selectedRowKeys.map((item) => {
            vipuser_manydel(item).then((res) => {
                console.log(res.data);
                vipuser_list().then((res) => {
                    setData(res.data)
                    console.log(res.data);
                })
            })
        })
    }
    //下拉框选择
    var opt = (value) => {
        console.log(value);
        setOptions(value)
        if (value == "全部") {
            vipuser_list().then((res) => {
                setData(res.data)
            })
        } else {
            vipuser_select({ type_like: value }).then((res) => {
                console.log(res.data);
                setData(res.data)

            })
        }


    }

    //新增
    //表单验证通过 执行
    const onFinish1 = (values) => {
        vipuser_add({
            icon: values.icon,
            name: values.name,
            type: values.type,
            explain: values.explain,
            time: values.time, key: Number(data.length + 1)
        }).then((res) => {
            console.log(res.data);
            vipuser_list().then((res) => {
                setData(res.data)
                console.log(res.data);
                notification.success({
                    placement: "top",
                    message: "新增成功！"
                })
            })
        })
        handleCancel1()
    };

    //编辑
    //表单验证通过
    const onFinish2 = (values) => {
        vipuser_edit(id, { icon: values.icon, name: values.name, explain: values.explain, time: values.time }).then((res) => {
            console.log(res.data);
            vipuser_list().then((res) => {
                setData(res.data)
                notification.success({
                    placement: "top",
                    message: "编辑成功！"
                })
                handleCancel2()
            })
        })
    }
    //决定了每一列渲染什么数据
    const columns = [
        {
            title: '权益图标',
            dataIndex: 'icon',
            key: 1
        },
        {
            title: '权益名称',
            dataIndex: 'name',
        },
        {
            title: '权益类型',
            dataIndex: 'type',
        },
        {
            title: '权益说明',
            dataIndex: 'explain',
        },
        {
            title: '权益状态',
            dataIndex: 'status',
            key: 'status',
            render: (_, record) => (
                <Switch defaultChecked onChange={onChange} />
            )

        },
        {
            title: '最后修改时间',
            dataIndex: 'time',
            key: 'time'
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <>
                    <span className='iconfont icon-delete' onClick={() => { edit(record) }} style={{ color: "blue" }}>编辑</span>
                    <span>    </span>
                    <span className='iconfont icon-delete' onClick={() => { del(record) }} style={{ color: "red" }}>删除</span>

                </>
            ),
        },
    ];
    //分页
    const handleChange = (pagination) => {
        setPagination(pagination) //最新页码
        setLoading(true)
        vipuser_pagination({ _page: pagination.current, _limit: pagination.pageSize }).then((res) => {
            console.log(res.data);
        })
        setLoading(false)
    }
    return (
        <div className='vipEquities'>
            <div className='text'>
                <span style={{ marginRight: "10px" }}>会员管理</span>/
                <span style={{ marginLeft: "10px" }}>会员权益</span>
            </div>
            <h2 style={{ marginBottom: "20px", marginLeft: "40px" }}>会员权益</h2>
            <div className="opet" >
                <div>
                    <span style={{ marginRight: "10px" }}>权益类型</span><Select
                        style={{
                            width: 300,
                        }}
                        onChange={opt}
                        options={[
                            {
                                value: '全部',
                                label: '全部',
                            },
                            {
                                value: '系统生成',
                                label: '系统生成',
                            },
                            {
                                value: '自定义',
                                label: '自定义',
                            },
                        ]}
                    />
                </div>
                <div>
                    <span style={{ marginRight: "10px", lineHeight: "30px" }}>权益名称</span> <Search style={{ width: 300, marginRight: 20 }} placeholder="输入权益名称" onSearch={onSearch} enterButton />
                </div>
                <div><Space wrap>
                    <Button type='primary' onClick={manydel}>批量删除</Button>
                    <Button type='primary' onClick={add}>新增</Button>
                </Space></div>
            </div>
            <Table columns={columns}
                loading={loading}
                size='middle'
                dataSource={data}
                pagination={pagination}
                rowSelection={rowSelection}
                onChange={handleChange}
            />

            {/*   //新增 */}
            <Modal title="新增" open={isModalOpen1} onCancel={handleCancel1} >
                <Form
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={onFinish1}
                >
                    <Form.Item
                        label="权益图标"
                        name="icon"
                        rules={[{
                            required: true,
                            message: '请输入图标',
                        }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="权益名称"
                        name="name"
                        rules={[{
                            required: true,
                            message: '请输入名称',
                        }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="权益类型"
                        name="type"
                        rules={[{
                            required: true,
                            message: '请输入类型',
                        }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="权益说明"
                        name="explain"
                        rules={[{
                            required: true,
                            message: '请输入说明',
                        }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="修改时间"
                        name="time"
                        rules={[{
                            required: true,
                            message: '请输入时间',
                        }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                        <Button type="primary" htmlType="submit">新增</Button>
                    </Form.Item>
                </Form>
            </Modal>

            {/* 编辑 */}
            <Modal title="编辑" open={isModalOpen2} onCancel={handleCancel2} >
                <Form
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={onFinish2}
                    form={form}
                >
                    <Form.Item
                        label="权益图标"
                        name="icon"
                        rules={[{
                            required: true,
                            message: '请输入图标',
                        }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="权益名称"
                        name="name"
                        rules={[{
                            required: true,
                            message: '请输入名称',
                        }]}
                    >
                        <Input />
                    </Form.Item>

                    {/* <Select
                        options={options}
                    /> */}
                    <Form.Item
                        label="权益说明"
                        name="explain"
                        rules={[{
                            required: true,
                            message: '请输入说明',
                        }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="修改时间"
                        name="time"
                        rules={[{
                            required: true,
                            message: '请输入时间',
                        }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                        <Button type="primary" htmlType="submit" >编辑</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default VipEquities;